<script setup>
import { reactive, ref, onMounted, onUnmounted, h } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { ElNotification } from 'element-plus'
const router = useRouter()
const userStore = useUserStore()

// 表单数据收集
const form = reactive({ username: 'admin', password: 'admin' })
// 表单校验
const rules = reactive({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

// 提交数据
let formRef = ref(null)
let loading = ref(false)
const submit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      await userStore.login(form)
      ElNotification({
        title: '登录成功',
        type: 'success',
        message: `欢迎您：${form.username}`
      })
      router.push('/')
    } finally {
      loading.value = false
    }
  })
}

// 处理动画结束事件
const isPeoplEnd = ref(false)
const isSphereEnd = ref(false)
const handleAnimationend = (className) => {
  if (className === 'people') {
    isPeoplEnd.value = true
  } else {
    isSphereEnd.value = true
  }
}

// 键盘点击Enter
const onKeyUp = (event) => {
  if (event.key == 'Enter') submit()
}

onMounted(() => {
  document.addEventListener('keyup', onKeyUp)
})
onUnmounted(() => {
  document.removeEventListener('keyup', onKeyUp)
})
</script>

<template>
  <div class="login-container">
    <div class="content">
      <!-- 左边 -->
      <div class="left">
        <!-- 人 -->
        <img
          src="@/assets/images/login_people.png"
          :class="isPeoplEnd ? 'p-other-animtion' : 'p-animtion'"
          class="people"
          alt="people"
          @animationend="handleAnimationend('people')"
        />
        <!-- 球 -->
        <img
          src="@/assets/images/login_sphere.png"
          :class="isSphereEnd ? 's-other-animtion' : 's-animtion'"
          class="sphere"
          alt="sphere"
          @animationend="handleAnimationend('sphere')"
        />
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="right-content">
          <h2 class="title">欢迎回来</h2>
          <div class="tip">
            <span class="line"></span>
            <span class="text">账号密码登录</span>
            <span class="line"></span>
          </div>
          <!-- 表单 -->
          <el-form class="form" :model="form" :rules="rules" ref="formRef">
            <el-form-item prop="username">
              <el-input v-model="form.username" size="large" placeholder="请输入用户名">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                type="password"
                size="large"
                show-password
                placeholder="请输入密码"
              >
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="submit-btn" type="primary" round :loading="loading" @click="submit">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background-color: #abc6f8;
  background-image: radial-gradient(closest-side, rgb(255, 255, 255), rgba(235, 105, 78, 0)),
    radial-gradient(closest-side, rgb(250, 203, 203), rgba(243, 11, 164, 0)),
    radial-gradient(closest-side, rgb(237, 252, 202), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgb(197, 248, 241), rgba(170, 142, 245, 0)),
    radial-gradient(closest-side, rgb(206, 200, 243), rgba(248, 192, 147, 0));
  background-size:
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position:
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 10s movement linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.content {
  width: 90%;
  height: 90vh;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
}

.left {
  flex: 1;
  position: relative;
  .sphere {
    position: absolute;
    left: 30%;
    width: 90%;
    z-index: 1;
  }
  .s-animtion {
    animation: sphereAnimation 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }
  .s-other-animtion {
    animation-name: sOtherAnimation;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
  }
  .people {
    position: absolute;
    left: -50%;
    top: 20%;
    width: 70%;
    z-index: 2;
  }
  .p-animtion {
    animation: peopleAnimation 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }
  .p-other-animtion {
    animation-name: pOtherAnimation;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
  }
}

.right {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: end;
  align-items: center;
}
.right-content {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  .title {
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 3px;
    margin: 28px 0;
  }
  .tip {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      width: 64px;
      height: 1px;
      background-color: #c9d4e1;
    }
    .text {
      font-size: 16px;
      color: #a0aab6;
      margin: 0 8px;
    }
  }
  .form {
    width: 50%;
    .submit-btn {
      width: 100%;
      height: 40px;
      border-radius: 10px;
    }
  }
}

// 背景颜色
@keyframes movement {
  0%,
  100% {
    background-size:
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
    background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  }

  25% {
    background-size:
      100vmax 100vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      60vmax 60vmax;
    background-position:
      -60vmax -90vmax,
      50vmax -40vmax,
      0vmax -20vmax,
      -40vmax -20vmax,
      40vmax 60vmax;
  }

  50% {
    background-size:
      80vmax 80vmax,
      110vmax 110vmax,
      80vmax 80vmax,
      60vmax 60vmax,
      80vmax 80vmax;
    background-position:
      -50vmax -70vmax,
      40vmax -30vmax,
      10vmax 0vmax,
      20vmax 10vmax,
      30vmax 70vmax;
  }

  75% {
    background-size:
      90vmax 90vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      70vmax 70vmax;
    background-position:
      -50vmax -40vmax,
      50vmax -30vmax,
      20vmax 0vmax,
      -10vmax 10vmax,
      40vmax 60vmax;
  }
}

// 进入的时候
@keyframes sphereAnimation {
  0% {
    width: 10%;
  }

  100% {
    width: 90%;
    transform: translate(-30%, 5%);
  }
}

@keyframes peopleAnimation {
  0% {
    width: 40%;
  }

  100% {
    width: 70%;
    transform: translate(90%, -10%);
  }
}
// 动画介绍的时候
@keyframes pOtherAnimation {
  0% {
    transform: translate(90%, -10%);
  }

  100% {
    transform: translate(90%, -15%);
  }
}
@keyframes sOtherAnimation {
  0% {
    transform: translate(-30%, 5%);
  }

  100% {
    transform: translate(-30%, 10%);
  }
}
</style>
